<template>
  <el-dialog title="详情" v-model="visible" width="80%">
    <el-table :data="tableData"
              style="width: 100%"
              border stripe
              height="760px">
      <el-table-column label="序号" width="60" align="center">
        <template #default="{ $index }">
          {{ $index + 1 }} <!-- 使用 $index 计算序号 -->
        </template>
      </el-table-column>
      <el-table-column v-for="column in columns" :key="column.prop" :prop="column.prop"
                       :label="column.label"
                       :width="column.width" :align="column.align"></el-table-column>
    </el-table>
  </el-dialog>

</template>

<script setup>

import request from '@/config/axios'

const visible = ref(false)
const tableData = ref([])

const columns = ref([
  {prop: 'indexId', label: '合作编号', width: '60', align: 'center'},
  {prop: 'customName', label: '客户名称', width: '120', align: 'center'},
  {prop: 'businessType', label: '业务类型', width: '80', align: 'center'},
  {prop: 'memo', label: '订单备注', width: '120', align: 'center'},
  {prop: 'payType', label: '缴费类型', width: '120', align: 'center'},
  {prop: 'payWay', label: '收款方式', width: '120', align: 'center'},
  {prop: 'payValue', label: '收款金额', width: '120', align: 'center'},
  {prop: 'rebateWay', label: '支出方式', width: '120', align: 'center'},
  {prop: 'rebateValue', label: '支出金额', width: '120', align: 'center'},
  {prop: 'payDateTime', label: '交易日期', width: '120', align: 'center'},
  {prop: 'roundUp', label: '交易摘要', align: 'center'},
])

const fetchPayDetail = async function (queryParam) {
  const response = await request.get({
    url: '/statistics/getAgentPayDetail',
    params: queryParam
  })
  tableData.value = response
}

defineExpose({
  open: (rowData, searchData) => {
    fetchPayDetail({...searchData,"agencyId": rowData.agentName})
    visible.value = true
  }
})
</script>

<style scoped></style>
